<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-15 15:25:34
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-25 20:28:26
-->
<template>
    <div>
        <!-- 搜索框 -->
        <user-search :loadData="loadData" :page="page" />
        <el-divider />
        <!-- 按钮 -->
        <user-btns :setDialogVisible="setDialogVisible" :userIds="userIds" @on-batch-deletion="onBatchDeletion" />
        <el-divider />
        <!-- 列表 -->
        <user-table :page="page" :data="data" :total="total" :loadData="loadData" @on-select-uid="onSelectUid"
            @on-edit-user="onEditUser" />
        <!-- 弹出层 -->
        <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" :title="showTitle"
            width="30%" draggable>
            <component :editUid="editUid" :setDialogVisible="setDialogVisible" :is="DynamicComponentName" />
        </el-dialog>

    </div>
</template>

<script setup lang="ts">
/**
 * 导入配置
 * 子组件四个   userAdd增加表单   userBtns点击按钮   userSearch搜索框    userTable用户列表 userEdit编辑表单
 * 导入el-dialog 钩子函数
 * 导入侦听器
 * 路由对象
 * 删除网络请求
 * 错误提示信息
 * 成功提示信息
 */
import userAdd from './ui/userAdd.vue';
import userBtns from './ui/userBtns.vue';
import userSearch from './ui/userSearch.vue';
import userTable from './ui/userTable.vue';
import userEdit from './ui/userEdit.vue';
import { watch, ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { errorMessage } from '@/utils/Tools/errorMessage';
import { successMessage } from '@/utils/Tools/successMessage';
import { userDialogVisible, useUserList } from './empolyeehook'
import { userSystemEmployeeDeleteApi } from '@/services/employee';

/**
 * 定义Props
 */
interface IProps {
    page?: number
}

/**
 * 接收props数据
 */
const props = withDefaults(defineProps<IProps>(), {
    page: 1
})

/**
 * 定义数据
 * 路由对象
 * 定义接受的用户id
 * 接收要编辑修改的id
 */
const route = useRoute()
const userIds = ref<number[]>([])
const editUid = ref(0)


/**
 * 解析钩子函数
 * 设置dialogVisible的函数userDialogVisible
 * useUserList这儿第一次加载需要执行
 */
const [dialogVisible, setDialogVisible] = userDialogVisible()
const [data, total, loadData] = useUserList(props.page, route.query as object)

/**
 * 处理事件
 * 新增加数据后更新列表
 * 关闭新增表单后清除editUid为0
 * @param  DynamicComponentName  动态组件的name名字 
 * @param onSelectUid 选中用户记录
 * @param onBatchDeletion 批量删除用户
 * @param onEditUser 编辑修改用户数据
 * @param showTitle 弹出层显示的标题
 */
watch(dialogVisible, val => {
    if (!val) {
        let query = route.query as object
        loadData(props.page, query)
    }
})
watch(dialogVisible, val => {
    if (!val) {
        editUid.value = 0
    }
})
const DynamicComponentName = computed(() => {
    return editUid.value === 0 ? userAdd : userEdit
})
const onSelectUid = (userids: number[]) => {
    userIds.value = userids

}
const onBatchDeletion = async () => {
    let ret = await userSystemEmployeeDeleteApi(userIds.value)
    if (ret.code === 200) {
        loadData(1, route.query)
        successMessage('删除成功', () => {
            userIds.value = []
        }, 3000)
    } else {
        errorMessage('删除错误', () => { }, 3000)
    }
}
const onEditUser = (userid: number) => {
    editUid.value = userid
    setDialogVisible(true)
}
const showTitle = computed(() => {
    return editUid.value === 0 ? '新增用户信息' : '编辑修改用户信息'
})
</script>

<style lang="scss" scoped></style>